/* 订单通知自定义样式 */
.order-notification,
.reminder-notification,
.persistent-notification {
  max-width: 450px !important; /* 更宽的通知 */
  min-width: 380px !important; /* 增加最小宽度 */
  word-wrap: break-word !important;
  z-index: 2999 !important; /* 确保高于其他元素但低于顶部栏 */
  border-radius: 4px !important; /* 圆角更适中 */
  padding: 14px !important; /* 增加内边距 */
}

/* 修复Element Plus通知组件样式 */
.el-notification {
  max-width: 450px !important; /* 匹配上面的宽度 */
  min-width: 380px !important;
  overflow: hidden !important;
  border: 1px solid #EBEEF5 !important; /* 轻微边框 */
  box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.15) !important; /* 更强的阴影 */
  background-color: #FFFFFF !important;
}

.el-notification__content {
  text-align: left !important;
  word-break: break-all !important;
  max-width: 100% !important;
  margin: 10px 0 !important; /* 增加边距 */
  padding-right: 10px !important;
  font-size: 14px !important; /* 字体稍大 */
  line-height: 1.6 !important; /* 增加行高 */
  color: #606266 !important; /* 更柔和的文字颜色 */
}

.el-notification__title {
  font-weight: 600 !important; /* 稍微减轻字重 */
  font-size: 18px !important; /* 更大的标题 */
  margin-bottom: 8px !important;
  padding-right: 15px !important; /* 为关闭按钮留出空间 */
  color: #303133 !important; /* 更深的标题颜色 */
}

/* 防止通知内容超出容器 */
.el-notification__group {
  width: 100% !important;
  max-width: calc(100% - 60px) !important; /* 增加空间 */
}

/* 确保可以点击通知 */
.el-notification {
  cursor: pointer !important;
  transition: all 0.3s ease !important; /* 添加过渡效果 */
}

.el-notification:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15), 0 4px 8px rgba(0, 0, 0, 0.1) !important; /* 悬停时阴影更强 */
  transform: translateY(-2px) !important; /* 轻微上浮效果 */
}

/* 强化关闭按钮 */
.el-notification__closeBtn {
  top: 16px !important;
  right: 16px !important;
  font-size: 18px !important;
  color: #909399 !important;
  width: 24px !important;
  height: 24px !important;
  line-height: 24px !important;
  text-align: center !important;
  border-radius: 50% !important;
  transition: all 0.2s ease !important;
}

.el-notification__closeBtn:hover {
  color: #409EFF !important;
  background-color: rgba(64, 158, 255, 0.1) !important; /* 悬停时的背景色 */
}

/* 特殊的持久通知样式 */
.persistent-notification {
  border-left: 6px solid #67C23A !important; /* 更粗的边框 */
  position: relative !important;
  animation: subtle-pulse 2s infinite alternate; /* 轻微脉动效果 */
}

@keyframes subtle-pulse {
  from { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15); }
  to { box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2); }
}

/* 添加左侧彩色条 */
.persistent-notification::before {
  content: '';
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 6px !important; /* 更粗的彩色条 */
  background: linear-gradient(to bottom, #67C23A, #95D475) !important;
  border-radius: 4px 0 0 4px !important;
}

.persistent-notification.el-notification--warning {
  border-left: 4px solid #E6A23C !important;
}

.persistent-notification.el-notification--warning::before {
  background: linear-gradient(to bottom, #E6A23C, #F3D19E) !important;
}

/* 为成功通知添加图标 */
.el-notification--success .el-notification__icon {
  color: #67C23A !important;
  font-size: 24px !important;
}

/* 为警告通知添加图标 */
.el-notification--warning .el-notification__icon {
  color: #E6A23C !important;
  font-size: 24px !important;
}

/* 修复通知点击区域 */
.el-notification__content,
.el-notification__title {
  pointer-events: none !important; /* 确保点击穿透到通知本身 */
}

/* 添加订单信息样式 */
.order-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important; /* 增加间距 */
  margin-top: 10px !important;
  padding: 12px 16px !important; /* 增加内边距 */
  background-color: rgba(64, 158, 255, 0.08) !important; /* 更明显的背景色 */
  border-radius: 8px !important; /* 增加圆角 */
  border: 1px solid rgba(64, 158, 255, 0.2) !important; /* 添加轻微边框 */
}

.order-info-item {
  display: flex !important;
  justify-content: space-between !important;
  font-size: 14px !important;
}

.order-info-label {
  font-weight: 500 !important;
  color: #606266 !important;
}

.order-info-value {
  font-weight: 600 !important;
  color: #303133 !important;
} 